import React, { Component } from 'react';
import {
  Card,
  Table,
  Form,
  Button,
  Input,
  Row,
  Col,
  Modal,
  Select,
  InputNumber,
  DatePicker,
  message,
  Popconfirm,
  Tag,
  Divider,
} from 'antd';
import { createNetCar, queryNetCar, deleteNetCar, updateNetCar } from '@/services/netCar';
import moment from 'moment';
@Form.create()
class NetCar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      orderData: [],
      isFormVisible: false,
      optionType: 'create',
      currentId: '',
      currentOrderCount: '',
      countFree: '',
    };
  }
  componentDidMount() {
    this.initialNetCarData();
  }
  initialNetCarData = async () => {
    const { data } = await queryNetCar();
    console.log(data);
    this.setState({
      orderData: data.list,
      currentOrderCount: data.count,
      countFree: data.freeCount.toFixed(2),
    });
  };
  // 添加数据事件
  handleAdd = () => {
    this.setState({
      isFormVisible: true,
      optionType: 'create',
    });
  };
  // 表单提交
  handleSubmit = () => {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const value = {
          ...values,
          tripTime: values['dateTime'].format('YYYY-MM-DD'),
        };
        this.handleSubmitForm(value);
        this.props.form.resetFields();

        this.setState({
          isFormVisible: false,
        });
      }
    });
  };
  handleSubmitForm = async value => {
    console.log(value);
    const { optionType } = this.state;
    if (optionType == 'create') {
      const res = await createNetCar(value);
      if (res.code == 0) {
        this.initialNetCarData();
        message.success('添加成功');
      } else {
        message.error(res);
      }
    } else {
      console.log('编辑');
      console.log(value);
      const _id = this.state.currentId;
      const values = { ...value, _id };
      const res = await updateNetCar(values);
      if (res.code == 0) {
        this.initialNetCarData();
        message.success('添加成功');
      } else {
        message.error(res);
      }
    }
  };
  // 取消表单
  handleCancel = () => {
    this.setState({
      isFormVisible: false,
    });
    this.props.form.resetFields();
  };

  // 删除气泡
  handleDelete = async record => {
    console.log(record._id);
    const id = record._id;
    const res = await deleteNetCar({ id });
    if (res.code == 0) {
      message.success('删除成功');
      this.initialNetCarData();
    }
  };
  // 编辑
  handleEdit = record => {
    console.log(record.tripTime);

    this.props.form.setFieldsValue(
      {
        dateTime: moment(record.tripTime, 'YYYY/MM/DD'),
        cost: record.cost,
        enddingPoint: record.enddingPoint,
        memberNumber: record.memberNumber,
        starttingPoint: record.starttingPoint,
        type: record.type,
      },
      () => {
        this.setState({
          isFormVisible: true,
          currentId: record._id,
          optionType: 'edit',
        });
      },
    );
  };
  handleDeleteCancel = () => {};
  render() {
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
    };
    const columns = [
      {
        title: '类型',
        key: 'type',
        render: record => {
          return (
            <div>
              {record.type == 'halo' && <div style={{ color: '#1980ff' }}>哈罗顺风车</div>}
              {record.type == 'dida' && <div style={{ color: '#ffc53d' }}>嘀嗒出行</div>}
            </div>
          );
        },
      },
      {
        title: '费用',
        dataIndex: 'cost',
        key: 'cost',
      },
      {
        title: '人数',
        key: 'memberNumber',
        render: record => {
          return (
            <div>
              <Tag color="red">{record.memberNumber}</Tag>
            </div>
          );
        },
      },
      {
        title: ' 起点',
        dataIndex: 'starttingPoint',
        key: 'startingPoint',
      },
      {
        title: '终点',
        dataIndex: 'enddingPoint',
        key: 'enddingPoint',
      },
      {
        title: '日期',
        dataIndex: 'tripTime',
        key: 'tripTime',
      },
      {
        title: '操作',
        key: 'action',
        align: 'center',
        render: record => {
          return (
            <div>
              <Button type="link" onClick={() => this.handleEdit(record)}>
                操作
              </Button>
              <Popconfirm
                title="确定删除?"
                onConfirm={() => this.handleDelete(record)}
                onCancel={this.handleDeleteCancel}
                okText="是"
                cancelText="否"
              >
                <Button type="link">删除</Button>
              </Popconfirm>
            </div>
          );
        },
      },
    ];
    const { orderData, isFormVisible, currentOrderCount, countFree } = this.state;
    const { getFieldDecorator } = this.props.form;
    return (
      <div>
        <Card>
          <Row gutter={24}>
            <Col xs={24} sm={24} md={12} lg={8} xl={8}>
              <Row gutter={24}>
                <Col xs={8} sm={8} md={12} lg={12} xl={10}>
                  {' '}
                </Col>
                <Col xs={8} sm={8} md={12} lg={12} xl={10}>
                  {' '}
                  <div>
                    <span style={{ fontSize: '16px' }}>订单总数</span>
                    <p style={{ color: '#000', fontSize: '24px', fontWeight: '500' }}>
                      {currentOrderCount}
                      <span style={{ fontSize: '16px', color: '#8b8b8b', marginLeft: '10px' }}>
                        单
                      </span>
                    </p>
                  </div>
                </Col>
              </Row>
            </Col>

            <Col xs={24} sm={24} md={12} lg={8} xl={8}>
              <Row gutter={24}>
                <Col xs={8} sm={8} md={12} lg={12} xl={12}>
                  {' '}
                  <Divider type="vertical" style={{ height: '60px' }} />{' '}
                </Col>
                <Col xs={8} sm={8} md={12} lg={12} xl={12}>
                  {' '}
                  <div>
                    <span style={{ fontSize: '16px' }}>总计收入</span>
                    <p style={{ color: '#000', fontSize: '24px', fontWeight: '500' }}>
                      {countFree}
                      <span style={{ fontSize: '16px', color: '#8b8b8b', marginLeft: '10px' }}>
                        元
                      </span>
                    </p>
                  </div>
                </Col>
              </Row>
            </Col>
            <Col xs={24} sm={24} md={12} lg={8} xl={8}>
              <Row gutter={24}>
                <Col xs={8} sm={12} md={12} lg={12} xl={12}>
                  {' '}
                  <Divider type="vertical" style={{ height: '60px' }} />{' '}
                </Col>
                <Col xs={8} sm={12} md={12} lg={12} xl={12}>
                  {' '}
                  <div>
                    <span style={{ fontSize: '16px' }}>总里程数</span>
                    <p style={{ color: '#000', fontSize: '24px', fontWeight: '500' }}>
                      2010{' '}
                      <span style={{ fontSize: '16px', color: '#8b8b8b', marginLeft: '10px' }}>
                        KM
                      </span>{' '}
                    </p>
                  </div>
                </Col>
              </Row>
            </Col>
          </Row>
        </Card>
        <Card title="网约车统计" style={{ marginTop: '10px' }}>
          <Row gutter={24}>
            <Col xs={24} sm={24} md={24} lg={8} xl={8} style={{ paddingBottom: '20px' }}>
              <Button type="primary" onClick={this.handleAdd}>
                添加数据
              </Button>
            </Col>
          </Row>
          <Table columns={columns} dataSource={orderData}></Table>
        </Card>
        <Modal visible={isFormVisible} onOk={this.handleSubmit} onCancel={this.handleCancel}>
          <Form {...formItemLayout}>
            <Form.Item label="类型">
              {getFieldDecorator('type', {
                rules: [
                  {
                    required: true,
                  },
                ],
              })(
                <Select>
                  <Select.Option value="halo">哈罗顺风车</Select.Option>
                  <Select.Option value="dida">嘀嗒出行</Select.Option>
                  <Select.Option value="didi">滴滴</Select.Option>
                </Select>,
              )}
            </Form.Item>
            <Form.Item label="费用">
              {getFieldDecorator('cost', {
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<InputNumber min={0}></InputNumber>)}
            </Form.Item>
            <Form.Item label="人数">
              {getFieldDecorator('memberNumber', {
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<InputNumber min={0}></InputNumber>)}
            </Form.Item>
            <Form.Item label="起点">
              {getFieldDecorator('starttingPoint', {
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Input placeholder="请输入起点"></Input>)}
            </Form.Item>
            <Form.Item label="终点">
              {getFieldDecorator('enddingPoint', {
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Input placeholder="请输入终点"></Input>)}
            </Form.Item>
            <Form.Item label="时间">
              {getFieldDecorator('dateTime', {
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<DatePicker />)}
            </Form.Item>
          </Form>
        </Modal>
      </div>
    );
  }
}
export default NetCar;
